<template>
  <div>
    <page-list :x-uri="uri" :x-tabs="tabs" :custom-components="custom" :doactions="doactions">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
      </template>
    </page-list>
    <el-dialog v-if="printVisible" title="证书打印" :visible.sync="printVisible" width="860px" top="4vh" :close-on-click-modal="false">
      <print-page :cert="cert" :direction="direction" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="change">横纵切换</el-button>
        <el-button v-print="printObj" type="primary" size="small">打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import PrintPage from '@/pages/course/cert/components/print.vue';
import User from '@/pages/user/student/account/components/user.vue';
import Vue from 'vue';
import Print from 'vue-print-nb';
Vue.use(Print);
export default {
  components: {
    PageList,
    PrintPage
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/user/admin/student/' + this.$route.params.id + '/cert/list',
      tabs: [
        {
          title: '学员证书',
          uri: '/user/student/' + this.$route.params.id + '/cert',
          meta: {
            permission: 'user.student.cert'
          }
        }
      ],
      doactions: [{ title: '证书下载', callback: this.printCert }],
      printVisible: false,
      printObj: {
        id: 'print',
        popTitle: '证书打印'
      },
      custom: {
        user: User
      },
      cert: {
        cert_info: {},
        course_list: []
      },
      direction: 'vertical'
    };
  },
  methods: {
    printCert: function({ row }) {
      // 获取证书信息
      this.$http.get(
        '/user/admin/student/cert/print',
        {
          id: row.id,
          user_id: row.user_id,
          course_id: row.course_id
        },
        response => {
          this.cert = response.data;
          this.printVisible = true;
        },
        _ => {
          this.$message.error('获取证书信息失败');
        }
      );
    },
    change: function() {
      this.direction = this.direction == 'vertical' ? 'horizontal' : 'vertical';
    }
  }
};
</script>
<style>
@media print {
  body {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  button {
    display: none;
  }
}
</style>
